<template>
   <!-- {{ multipleSelection }} -->
    <el-button type="success" @click="addbtn">
      <el-icon>
      <Plus />
    </el-icon>
      解除禁用</el-button>
   
    <el-button type="danger" @click="locked">
      <el-icon><Delete /></el-icon>
      禁用</el-button>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <!-- <el-table-column label="Date" width="120">
        <template #default="scope">{{ scope.row.date }}</template>
      </el-table-column> -->
      <el-table-column property="loginName" label="登录名" />
      <el-table-column property="nickName" label="昵称" width="120" />
      <el-table-column  label="身份状态" >
        <template #default="scope">
        <span class="green" v-if="scope.row.lockedFlag==0">正常</span>
        <span class="red" v-else> 禁用</span>
        </template>
      </el-table-column>
      <el-table-column  label="是否注销" >
        <template #default="scope">
        <span class="green" v-if="scope.row.isDeleted==0">正常</span>
        <span class="red" v-else> 禁用</span>
        </template>
      </el-table-column>
      <el-table-column property="createTime" label="注册时间" />
    </el-table>
    <el-pagination background @current-change="currentChange" layout="prev, pager, next" :total="total" />
  </template>
  
  <script  setup>
  import { onMounted, ref } from 'vue'
  import { ElTable } from 'element-plus'
  import { Plus, Delete } from '@element-plus/icons-vue'

  import axios from '../../ajax';
  
  const multipleTableRef = ref()
  const multipleSelection = ref([])
 
  const handleSelectionChange = (val) => {
    multipleSelection.value = val
  }
  
  const tableData =ref([

  ]) 
  let total=ref(0)
  onMounted(()=>{
    getdata(1)
  })
  let getdata=async (pageNumber)=>{
    let {list,totalPage}=await axios.get('/users',{
        params:{
            pageNumber,
            pageSize: 10
        }
    })
    tableData.value=list
    total.value=totalPage
  }
  let currentChange = (page) => {
  console.log(page);
  getdata(page)
}
  let addbtn=()=>{
  onoff(0)
  }
  let locked=()=>{
    onoff(1)

  }

  let onoff=async (n)=>{
    let ids=[]
    multipleSelection.value.map((item)=>{
        ids.push(item.userId)
    })
    let res=await axios.put(`/users/${n}`,{
        ids
    })
    getdata(1)
    console.log(ids);
  }
  </script>
  <style>
    .green{
        color: green;
    }
    .red{
        color:red;
    }
</style>
  